<template>
  <div class="app">
    <div v-if="$store.state.detail.sessionData">
      <!-- 头部信息 -->
      <div class="head">
        <p class="session-name">
          {{ $store.state.detail.sessionData.intro.name }}
        </p>
        <div class="grade-box">
         
          <van-rate color="rgb(212, 183, 14)" size="14px" v-model="$store.state.detail.sessionData.grade" readonly />
          <p class="grade">{{ $store.state.detail.sessionData.grade }}</p>
          <p class="persons">
            {{ $store.state.detail.sessionData.sales }}人正在学
          </p>
        </div>

        <!-- 折扣信息的显示 -->
        <div class="price-box">
          <p class="free" v-if="$store.state.detail.sessionData.free">免费</p>
          <p v-else-if="$store.state.detail.sessionData.discount">
            <span class="discount-price"
              >￥{{
                $store.state.detail.sessionData.intro.price *
                $store.state.detail.sessionData.discount
              }}</span
            >
            <span class="prediscount-price"
              >￥{{ $store.state.detail.sessionData.intro.price }}</span
            >
            <span class="nowdiscount">限时优惠</span>
          </p>
          <p v-else>￥{{ $store.state.detail.sessionData.intro.price }}</p>
        </div>
      </div>
      <!-- 教师信息 -->
      <van-cell
        center
        v-if="$store.state.detail.teacherData"
        is-link
        :key="$store.state.detail.teacherData.tid"
      >
        <div class="f-box">
          <!-- 头像 -->
          <van-image
            round
            width="50px"
            height="50px"
            :src="$store.state.detail.teacherData.pic"
          />
          <!-- 关注名称 -->
          <div class="f-title">
            <p>{{ $store.state.detail.teacherData.name }}</p>
            <span>{{ $store.state.detail.teacherData.fans }}粉丝</span>
          </div>
        </div>
      </van-cell>
      <!-- 课程介绍 -->
      
      <div class="session-intro">
        <p>课程介绍</p>        
        <img
          v-lazy="
            $store.state.detail.sessionData &&
            $store.state.detail.sessionData.intro.detail.pic
          "
        />
        <p>{{$store.state.detail.sessionData.intro.detail.sessionInfo}}</p>
      </div>
    </div>
    <!-- ajax请求完成前显示加载动画 -->
    <div v-else>
      <myLoading></myLoading>
    </div>
  </div>
</template>

<script>
import myLoading from "@/globalcmp/myLoading/myLoading.vue";
export default {
  components: { myLoading },
  data() {
    return {
      sessionData: this.$store.state.detail.sessionData,
    };
  },
  watch: {
    sessionData(newValue) {
      console.log(newValue);
    },
  },
  mounted() {
    // console.log(this.$store.state.detail.sessionData);
    // console.log(this.$store.state.detail.sessionData);
  },
};
</script>

<style lang="scss" scoped>
.app{
  height: calc(100% - 75px);
  overflow-y: auto;
}
@mixin little-gray {
  font-size: 12px;
  color: rgb(158, 157, 157);
}
.head {
  padding: 12px 30px;
  background-color: white;
  margin-top: 5px;
}
.session-name {
  font-size: 16px;
  font-weight: 600;
}
.grade-box {
  display: flex;
  .grade {
    font-size: 12px;
    color: black;
    margin-left: 5px
  }
  .persons {
    @include little-gray();
    margin-left: 30px;
  }
  .van-rate{
    align-items: center
  }
}
.price-box{
  p{
    margin: 0
  }
}
.free {
  @include little-gray();
}
.discount-price {
  color: rgb(212, 183, 14);
  font-size: 14px;
  font-weight: 600;
}
.prediscount-price {
  color: #ccc;
  font-size: 14px;
  text-decoration: line-through;
}
.nowdiscount {
  border: 0.5px solid red;
  border-radius: 8px;
  margin-left: 5px;
  font-size: 12px;
  color: red;
  // display: inline-block;
  padding: 1px 5px;
}
.van-cell {
  width: 376px;
  height: 80px;
  margin-top: 5px;
  .f-box {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 5px;
    .f-title {
      margin-left: 10px;
      p {
        margin: 0 0;
        font-weight: 500;
      }
      span {
        color: #999999;
        font-size: 12px;
      }
    }
  }
}
.session-intro{
    background: white;
    margin-top: 5px;
    display: flex;
   align-items: center;
    flex-direction: column;
    padding: 12px 12px;
    img{
      width: 90%;
    }
    p:first-of-type{
      width: 100%;
      text-align: left;
      padding-left: 10px;
    }
    p:last-of-type{
      font-size: 12px;

    }
}
</style>